import React from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  Image,
  StyleSheet,
} from 'react-native';
import { pictureButtonClick } from '../actions/pictureButton';
import * as buttonTypes from '../constants/CollectionButtonTypes'
import { connect } from 'react-redux'


export class PictureButton extends React.Component {
  constructor(props) {
    super(props);
    let arr = props.id.split('-')
    this.state = {
      type: arr[0],
      id : arr[1],
    }
  }
  render() {
    return (
      <View style={this.props.style}>
        <TouchableOpacity onPress={() => {this.props.dispatch(
        pictureButtonClick(this.state.type, this.state.id, this.props.title)
        )}}>  
          <Image source={this.props.image} style={styles.image}/>
          <Text style={styles.text} numberOfLines={0}>{this.props.title}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  image: {
    marginTop: 5,
    width: 50,
    height: 50,
    alignSelf: 'center',
  },
  text: {
    flex: 1,
    marginTop: 5,
    textAlign: 'center',
    fontSize: 11,
  },
})

export default connect()(PictureButton);